<template>
    <div>
      <el-card>
        <el-descriptions class="margin-top" title="简介" :column="2" border>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-picture-outline"></i>
              头像
            </template>
            <img class="img" :src="avatar" alt="" />
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-user"></i>
              账户名
            </template>
            {{ username }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-s-custom"></i>
              昵称
            </template>
            {{ nickName }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-odometer"></i>
              年龄
            </template>
            {{ age }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-male"></i>
              <i class="el-icon-female"></i>
              性别
            </template>
            <el-tag size="small">{{ sex }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-message"></i>
              邮箱Email
            </template>
            {{ email }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-magic-stick"></i>
              个性签名
            </template>
            {{ description }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-date"></i>
              注册日期
            </template>
            {{ createTime | formatDate }}
          </el-descriptions-item>
        </el-descriptions>
      </el-card>
    </div>
  </template>
  
  <script>
import { getUserInfo } from '@/api/userInfo';
  export default {
    data() {
      return {
        avatar:String,
        username:String,
        nickName:String,
        age:Number,
        sex:String,
        email:String,
        description:String,
        createTime:Date,
      };
    },
    mounted() {
      this.load();
    },
    methods: {
      load() {
        getUserInfo()
          .then((res) => {
            this.avatar = res.data.avatar;
            this.username = this.$store.state.username;
            this.age = res.data.age;
            this.email = res.data.email;
            this.createTime = res.data.createTime;
            this.nickName = res.data.nickName;
            this.sex = res.data.sex == 1?'男':'女';
            this.description = res.data.description;

            this.$store.commit('setNickName',this.nickName)
            this.$store.commit('setAvatar',this.avatar)
          })
          .catch((err) => {
            console.log(err);
          });
      },
      handlePersonalDia(){
        this.dialogVisible = !this.dialogVisible
      }
    },
  };
  </script>
  
  <style scoped>
  .img {
    width: 80px;
    height: 80px;
  }
  </style>
  